<template>
	<view class="page" style="padding: 3% 3%;">
		<Navbar title="家政人员设置"></Navbar>
		<view class="settingCleaning">
			<view class="titel">
				<view class="name"> 状态设置： </view>
				<view class="start">
					<view class="kx">
						<view class="i"></view> 空闲
					</view>
					<view class="fm">
						<view class="i"></view> 繁忙
					</view>
				</view>
			</view>
			<view class="settingCleaning_box">
				<view class="list">
					<view class="int" v-for="(item, index) in dateList" :key="index">
						<view class="date"> {{item.date}} </view>
						<view class="tabs">
							<!-- 点击上午时，传递 'am' 来更新 sw 属性 -->
							<view :class="['td', item.sw ? 'action' : '']" @click="setform(item, 'am')"> 上午 </view>
							<!-- 点击下午时，传递 'pm' 来更新 xw 属性 -->
							<view :class="['td', item.xw ? 'action' : '']" @click="setform(item, 'pm')"> 下午 </view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 用户信息
				userInfo: uni.getStorageSync('USER_INFO'),
				dateList: [],
				formData: {}
			};
		},
		onLoad(e) {
			this.PurifierInfo()
			// this.sexDate()

		},
		methods: {
			// setform 方法用来切换日期对应的上午/下午状态
			setform(item, timeOfDay) {
				if (timeOfDay === 'am') {
					item.sw = !item.sw; // 切换上午状态
				} else if (timeOfDay === 'pm') {
					item.xw = !item.xw; // 切换下午状态
				}
				var status = this.panamData(this.dateList);
				var panams = {
					id: this.userInfo.OtherId,
					status: status
				}
				this.$u.api.PurifierStatus(panams).then(res => {
					uni.showToast({
						title: '修改成功',
						icon: 'none'
					});
				});
			},
			PurifierInfo() {
				var panams = {
					id: this.userInfo.OtherId
				}
				this.$u.api.PurifierInfo(panams).then(res => {
					var Status = res.data.Status;
					// 使用逗号分隔字符串并转换成数组
					const resultArray = Status.split(',');
					console.log(resultArray)
					this.dateList = this.parseData(resultArray);
				});
			},
			panamData(data) {
				// 转换为目标格式
				const resultString = data.map(item => {
					// 将 true 转换为 2，false 转换为 1
					const swValue = item.sw ? '02' : '01';
					const xwValue = item.xw ? '02' : '01';
					return `${item.date}|${swValue}|${xwValue}`;
				}).join(', '); // 使用逗号和空格连接所有日期字符串
				return resultString
			},
			parseData(data) {
				return data.map(item => {
					const parts = item.split('|'); // 分割每一项
					return {
						date: parts[0], // 日期部分
						sw: parts[1] === '02', // sw状态，状态：01=空闲，02=繁忙
						xw: parts[2] === '02' // xw状态，状态：01=空闲，02=繁忙
					};
				});
			},
		}
	};
</script>
<style>
	css .settingCleaning {
		/* .settingCleaning 的样式 */
	}

	.settingCleaning .titel {}

	.settingCleaning .titel {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.settingCleaning .titel .name {
		font-size: 34rpx;
		color: #333333;
	}

	.settingCleaning .titel .start {
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.settingCleaning .titel .start .kx {
		margin-right: 25rpx;
		display: flex;
		align-items: center;
	}

	.settingCleaning .titel .start .kx .i {
		display: block;
		width: 45rpx;
		height: 45rpx;
		border: 1rpx solid #D4E0E3;
		background-color: #ffffff;
		margin-right: 5rpx;
	}

	.settingCleaning .titel .start .fm {
		display: flex;
		align-items: center;
	}

	.settingCleaning .titel .start .fm .i {
		display: block;
		width: 45rpx;
		height: 45rpx;
		border: 1rpx solid #DD1A00;
		background-color: #DD1A00;
		margin-right: 5rpx;
	}

	.settingCleaning .settingCleaning_box {
		/* .settingCleaning_box 的样式 */
	}

	.settingCleaning .settingCleaning_box .list {
		/* .list 的样式 */
	}

	.settingCleaning .settingCleaning_box .list .int {
		margin-bottom: 5%;
	}

	.settingCleaning .settingCleaning_box .list .int .date {
		width: 100%;
		height: 68rpx;
		line-height: 68rpx;
		font-weight: bold;
		font-size: 34rpx;
		color: #333333;
	}

	.settingCleaning .settingCleaning_box .list .int .tabs {
		display: flex;
	}

	.settingCleaning .settingCleaning_box .list .int .tabs .td {
		width: 45%;
		height: 80rpx;
		line-height: 80rpx;
		border: 1rpx solid #D4E0E3;
		text-align: center;
		margin-right: 10%;
		font-weight: bold;
		font-size: 34rpx;
		color: #333333;
	}

	.settingCleaning .settingCleaning_box .list .int .tabs .action {
		width: 45%;
		height: 80rpx;
		line-height: 80rpx;
		border: 1rpx solid #DD1A00;
		background-color: #DD1A00;
		text-align: center;
		margin-right: 10%;
		font-weight: bold;
		font-size: 34rpx;
		color: #ffffff;
	}

	.settingCleaning .settingCleaning_box .list .int .tabs .td.action {
		/* .td.action 的样式 */
	}
</style>